<form class="well">
<script>
function formSwitch(e) {
	$('fieldset').hide();
	$('#'+e).show();
} 
</script>

<span class="btn" onclick="$('fieldset').show()">Todos</span>
<span class="btn" onclick="formSwitch('datos-personales')">Datos Personales</span>
<span class="btn" onclick="formSwitch('localizacion')">Localización</span>
<span class="btn" onclick="formSwitch('evaluacion')">Evaluación</span>

<fieldset id="datos-personales">
	<legend>Datos Personales</legend>
	<img id="foto" class="img-polaroid">

	<input id="input_uid" type="hidden" name="uid" value="0" />
	
	<label for="text_nombre">Nombre</label>
	<div class="controls controls-row">
		<i class="icon-user"></i>
		<input type="text" id="input_nombre" name="nombre" class="input_reload" title="Nombre" placeholder="Nombre" disabled>	
	</div>
	<div class="controls controls-row">
		<i class="icon-user"></i>
		<input type="text" id="input_apellidos" name="apellidos" class="input_reload" title="Apellidos" placeholder="Apellidos" disabled>
	</div>

	<label for="text_direccion">Dirección</label>
	<div class="controls controls-row">
		<i class="icon-road"></i>
		<input type="text" id="input_direccion" name="direccion" class="input_reload" title="Dirección" placeholder="Dirección" disabled>
	</div>
	<div class="controls controls-row">
		<i class="icon-globe"></i>	
		<input type="text" id="input_poblacion" name="poblacion" class="input_reload" title="Población" placeholder="Población" disabled>
	</div>
	<div class="controls controls-row">
		<i class="icon-globe"></i>	
		<input type="text" id="input_provincia" name="provincia" class="input_reload" title="Provincia" placeholder="Provincia" disabled>
	</div>
	<div class="controls controls-row">
		<i class="icon-globe"></i>
		<input type="tel" id="input_codigo_postal" name="codigo_postal" class="input_reload" title="Código Postal" placeholder="Código Postal" disabled>
	</div>

	<label for="text_telefono_fijo">Contacto</label>
	<div class="controls controls-row">
		<i class="icon-home"></i>
		<input type="tel" id="input_telefono_fijo" name="telefono_fijo"  class="input-small input_reload" title="Teléfono Fijo" placeholder="Fijo" disabled>
		<input type="tel" id="input_telefono_movil" name="telefono_movil" class="input-small input_reload" title="Teléfono Móvil" placeholder="Móvil" disabled>
	</div>
	<div id="input_header_email" class="controls controls-row">
		<i class="icon-envelope" title="Correo Electrónico"></i>
		<a href="#"><input type="email" id="input_email" name="email" class="input_reload" title="Correo Eletrónico" placeholder="Correo Eletrónico" disabled></a>
	</div>
</fieldset>
	
<fieldset id="localizacion">
	<legend>Localización</legend>
	<div for="text_latitud">
		<i class="icon-map-marker"></i>
		<input type="number" id="input_latitud" class="input-small input_reload" name="latitud" title="Latitud" placeholder="0.00" disabled>
		<input type="number" id="input_longitud" class="input-small input_reload" name="longitud" title="Longitud" placeholder="0.00" disabled>
	</div>
	
	<div>
		<i class="icon-eye-open"></i>
		<div class="input-append">
			<input id="input_radio" type="number" class="input-small input_reload" min="5" max="100" step="5" name="radio" title="Distancia de actuación" placeholder="0">
			<span class="add-on">km</span>
			<input id="button_toggle_radio" class="btn" type="button" onclick="toggleRadio()" value="Radio">
		</div>
		<center><button type="button" id="button_poblaciones" class="btn">Listar poblaciones</button></center>
	</div>
</fieldset>

<fieldset id="evaluacion">
	<legend>Selección</legend>

	<label>Titulación</label>
	<select id="input_titulacion_id" name="titulacion_id" disabled>
		<option value="0">-</option>
		<option value="1">Arquitecto técnico</option>
		<option value="2">Arquitecto</option>
		<option value="3">Ingeniero industrial</option>
		<option value="4">Ingeniero técnico industrial</option>
		<option value="5">Técnico superior en eficiencia energética</option>
	</select>

	<label>Comentarios</label>
	<textarea id="input_comentarios" class="input_reload" style="resize: none;" disabled></textarea>

	<label>Puntuación</label>
	<div>	
		<input id="input_puntuacion" type="range" id="input_nota" min="0" max="10" step="0.5" value="0">
		<span id="text_puntuacion" class="add-on">-</span>
	</div>

	<label>Evaluación</label>
	<div id="botones-seleccion">
		<p>
			<input type="button" id="bsel1" class="btn btn-small btn-danger" onclick="selecciona(1)" value="Descartado">
			<input type="button" id="bsel0" class="btn btn-small btn-inverse disabled" onclick="selecciona(0)" value="Sin decidir">
			<input type="button" id="bsel4" class="btn btn-small btn-primary" onclick="selecciona(4)" value="ITECE">
		</p>
		<p>
			<input type="button" id="bsel2" class="btn btn-small btn-success" onclick="selecciona(2)" value="Preseleccionado">
			<input type="button" id="bsel3" class="btn btn-small btn-info" onclick="selecciona(3)" value="Seleccionado">
		</p>
		<p>
			
		</p>
	</div>

	<legend>Formación</legend>
	<div id="formacion-iconos" class="controls controls-row">
		<ul>
			<li id="icon-formacion-calener"><a target="_blank"><img width="48" src="img/formacion/calener.png" title="Formación Calener"></a></li>
			<li id="icon-formacion-ce3"><a target="_blank"><img width="48" src="img/formacion/ce3.png" title="Formación CE3"></a></li>
			<li id="icon-formacion-ce3x"><a target="_blank"><img width="48" src="img/formacion/ce3x.png" title="Formación CE3X"></a></li>
			<li id="icon-formacion-ite"><a target="_blank"><img width="48" src="img/formacion/ite.png" title="Formación ITE"></a></li>
			<li id="icon-formacion-camara"><img width="48" src="img/formacion/termografia.png" title="Cámara Termográfica"></li>
			<li id="icon-formacion-vehiculo"><img width="48" src="img/formacion/vehiculo.png" title="Vehículo Propio"></li>
			<li id="icon-formacion-seguro"><img width="48" src="img/formacion/seguro.png" title="Seguro de Responsabilidad Civil"></li>
			<li id="icon-formacion-curriculum"><a target="_blanck"><img width="48" src="img/formacion/curriculum.png" title="Curriculum Vitae"></a></li>
		</ul>
	</div>

	<legend>Utilidades</legend>
	<label>Radios</label>
	<div>
		<label class="checkbox" onclick="toggleRadios(0)">Téc. sin decidir<input type="checkbox" id="checkbox_radio_0"></label>
		<label class="checkbox" onclick="toggleRadios(2)">Téc. Seleccionados<input type="checkbox" id="checkbox_radio_2"></label>
		<label class="checkbox" onclick="toggleRadios(3)">Téc. Preseleccionados<input type="checkbox" id="checkbox_radio_3"></label>
		<label class="checkbox" onclick="toggleRadios(4)">Téc. ITECE<input type="checkbox" id="checkbox_radio_4"></label>
	</div>
</fieldset>
</form>
<script>
	// Inicialización de eventos del formulario
	candidatos_init();
</script>